上篇我們完成了 Liff 網頁編寫，為了要將它放到 Liff 上面，需要產生一個 https 的網址，因此我們選用 Vercel 來產生網址。

原本在學習時其實大多數都是看到將網頁部署到Heroku以產生網址，但因為Heroku官方表示他們的團隊花費太多力氣在免費產品方案的詐欺及濫用行為，為了將資源投注在顧客所需的關鍵功能，因此在今年（2022年）的11月28日，將會停止免費方案，也因此我們決定尋找其他可行的方式產生網址，但是目前尚未尋找到非常合適的方案。

Vercel：靜態網頁託管

Vercel（公司名與平台名一樣） 是開源前端框架 Next.js 背後的公司，Next.js 提供了包括伺服器端渲染和為 Web 應用程式生成靜態網站在內的功能。而 Vercel 是一個開放的平臺提供了網站託管服務，讓開發者能夠在上面開發、預覽和釋出 Web 應用，同時優化了前端開發者的開發和部署體驗，主要應用在靜態網頁的部署以及前期測試，官方也有列出可應用的網站類型。

• Frontends
• Functions that query DBs or APIs
• Blogs, e-commerce, marketing

同時他提供許多免費服務。

• 100GB/月 免費空間
• SSL
• CI/DI 建置
• CDN
• 自定義個人網域
• DDoS
• Serverless Function

現在大概了解 Vercel 後，我們就來部署網站吧~

第一步 Github 註冊

Vercel 可以直接連動 Github ，也就是說如果將 Github 上的專案連結到 Vercel ，當專案產生變動時 Vercel 會自動重新部署網站，不用再點更新按鈕多一個步驟，因此編編認為這是很貼心的設計~

1. 要開始將專案連結到 Vercel 首先要先有 Github 帳號。
   
   
   

2. 接下來要創建新的 Repository ，來讓專案透過 Git 控管專案。
   點選右上角的 + 。
   
   輸入名稱之後就可以建立了！
   名稱不能跟其他使用者輸入過的重覆
   

3. 建立之後就會看到Git指令，跟著做就可以將專案 push 到 Ｇithub。
   記得要cd 檔案位置
   

使用到的 Git 小解釋

增加 Git 到專案

git init

將目前修改的記錄到 Git 。

git add .

對此次修改命名，以便未來清楚知道此次修改內容。

git commit -m "此次修改的名稱"

將此修改記錄到主要 Ｇit 。

git commit -Ｍ main

連結到專案。

git remote add orgin 專案網址

將此修改 push 到 Github。

git push -u orgin main

4. 這樣就可以看到剛剛寫的東西囉！
   

第二步 部署到 Vercel

1. 首先進入到 https://vercel.com ，可以選擇多種登入方式，這裡我們選擇連結 Github ，可以方便更新部署好的網頁。
   
   

2. 進入到頁面後點選右側 Add New...，並選擇 Project。
   
   

3. 選擇 Github 並選擇要連結的專案。
   
   

4. 因為我們的範例表單很簡單所以不需要其他的設定，可以直接 Deply 。
   

5. 最後完成了！
   
   在瀏覽器開啟的樣子。
   

第三步 將網址放到 Line Login

1. 到 Provider 底下的 Line Login 進到 Liff 裡面 Add。
   
2. 設定好就會出現 Liff 網址，複製起來～
   
3. 為了方便看到手機上的樣子，我們修改圖文選單的 C 為 Liff 連結。
   
   
   
   最後按儲存。
   
4. 這樣我們就完成啦～～
   

參考資料：
https://tw511.com/a/01/40005.html
https://medium.com/@app030242/vercel-%E4%BB%8B%E7%B4%B9%E8%88%87%E6%A6%82%E5%BF%B5-b8fd0dc0e43d